<template>
  <div class="main">
    <div class="title">
      <div>{{ title }}</div>
    </div>
    <div class="">
      <el-form :inline="true">
        <el-form-item >
          <!-- <el-select v-model="query.one_id" placeholder="选择省" clearable>
            <el-option
              v-for="item in cate"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
          <el-form-item label="选择城市" v-if="admin_type==1">
            <el-select
              v-model="query.city_id"
              placeholder="请选择"
              @change="getArea"
              clearable
            >
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择区县" v-if="admin_type==1">
            <el-select v-model="query.area_id" placeholder="请选择" clearable>
              <el-option
                v-for="item in area"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="选择区县" v-if="admin_type!=1">
            <el-select
              v-model="query.area_id"
              placeholder="请选择"
             
              clearable
            >
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期筛选">
          <el-date-picker
             v-model="date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDateRange"
            format="yyyy-MM-dd"
           
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getShopTrend(true)">查询</el-button>
        </el-form-item>
          <!-- <el-select
            v-model="query.one_id"
            placeholder="选择业务经理"
            clearable
          >
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>
      </el-form>
      
        <!-- <el-form-item label="日期筛选">
          <el-tabs type="card" @tab-click="setDateType">
            <el-tab-pane label="今日" name="1"></el-tab-pane>
            <el-tab-pane label="昨日" name="2"></el-tab-pane>
            <el-tab-pane label="近7日" name="1"></el-tab-pane>
            <el-tab-pane label="近30日" name="4"></el-tab-pane>
          </el-tabs>
        </el-form-item> -->
        
           
     
    </div>

    <div ref="chart" style="width: 100%; height: 400px"></div>
<!-- 
      <div class="sta">
     商家总数：{{total}}
    </div> -->
 
  
    
    <div class="content">
      <el-table
        :data="data"
        stripe
        style="width: 100%; margin-bottom: 1.875rem"
      >
        <!-- <el-table-column prop="id" label="id"></el-table-column> -->
        <el-table-column prop="name" label="行业分类"></el-table-column>
        <el-table-column prop="shop_sum" label="商家总数"></el-table-column>
        <!-- <el-table-column prop="phone" label="新增商家"></el-table-column> -->
        <el-table-column prop="ratio" label="行业占比"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      data: [],
      // is_page: true,
      api_url: "",
      total:'',
      query: {
        city_id: "",
        area_id:''
      },
    };
  },
  components: {},
  mounted() {
    let refresh = localStorage.getItem("refresh");
    if (!refresh) {
      this.$router.go(0);
      localStorage.setItem("refresh", 1);
    }
    //  this.getEchartData()
  },
  created() {
    this.title = this.$route.meta.title;
    this.init();
    this.admin_type = localStorage.getItem('admin_type')
  },
  methods: {
    reset() {
      // this.getData(true);
    },

    init() {
      this.getData();
      this.getCity();
      this.getShopTrend();
    },

    getData() {
      this.global.httpRequest("shop/cateSta", this.query).then((res) => {
        this.data = res.data
        console.log( this.data)
        this.total = res.total
      });
    },

    getCity() {
      this.global.httpRequest("area", { p_id: 37 }).then((res) => {
        this.city = res;
      });
    },
    getArea() {
      this.global
        .httpRequest("area", { p_id: this.query.city_id })
        .then((res) => {
          this.area = res;
          this.query.area_id = "";
        });
    },

   

    getShopTrend() {
      this.global.httpRequest("trend/shop", this.query).then((res) => {
        this.getEchartData(res);
      });
    },

     getEchartData(e) {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        let x = e.x;
        let y = e.y;
        let title = "新增商家 商家总数："+e.total;
        const option = this.getEchartOption(x, y, title);
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    
    setDateType(e) {
      console.log(this.query.date_type);
    },

   
  },
};
</script>

<style scoped>
.card {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.box-card {
  width: 270px;
  height: 270px;
  border-radius: 5%;
}
.clearfix {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.clearfix .title {
  font-size: 2rem;
  font-weight: bold;
}

.clearfix span {
  font-size: 2rem;
  font-weight: bold;
  color: #1592e6;
}

.sub {
  margin-top: 1.33rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 1rem;
}

.subItem span {
  font-size: 1.31rem;
  color: #1592e6;
}

.content {
  margin-top: 2rem;
}

</style>
